<html>
	<head>
		<link rel="stylesheet" type="text/css" href="indexCSS.css" />
		<script type="text/javascript" src="jqueryOffline.js"></script>
		<script type="text/javascript" src="indexJavascript.js"></script>
		<title>Petrol Spent Calculator</title>
	</head>
	<body>
		<div class="CBody">
			<div class="CHeader">
				&nbsp;
			</div> 
			<div class="CMenu">
				<ul>
					<li><a href="#" id="IHomeToggle">Home</a></li>
					<li><a href="#" id="ICalculatorToggle">Calculator</a></li>
				</ul>
			</div>
			<div class="CContent">
				<div class="CHome">
					Petrol Calculator
					<div id="IHomeDescription">
						Use this petrol spending calculator to know how much petrol you spend on your trips.<br/>(click on "Calculator" to start)
						<div id="IJavascriptOff">
							Please turn javascript on or you wont be able to use this site.
						</div>						
					</div>
                    <br/>
				  	<table width="857" border="1">
						<tr>
							<td colspan="4"><span id="ISpanCommandListTitle">Command list</span></td>
						</tr>
						<tr>
							<td width="216" height="22">To go Back use -&gt; </td>
							<td width="117"> Left Arrow Key</td>
							<td width="117"><p>Keyboard key 'h'</p></td>
							<td width="379">Keyboard key 'b'</td>
						</tr>
						<tr>
							<td>To go Forward use -&gt;</td>
							<td>Right Arrow Key</td>
							<td>Keyboard key 'l'</td>
							<td>Keyboard key 'f'</td>
						</tr>
						<tr>
							<td>To Reset -&gt;</td>
							<td>Down Arrow Key</td>
							<td>Keyboard key 'j'</td>
							<td>Keyboard key 'r'</td>
						</tr>
						<tr>
							<td>To change between Menus -&gt;</td>
							<td>Up Arrow Key</td>
							<td>Keyboard key 'k'</td>
							<td>With cursor inside textbox press Esc to use shortcuts</td>
						</tr>
					</table>
				</div>
				<div class="CCalculator">
					<div id="ICalculatorDescription">
						This is the page where you insert you data. Keep inserting data and click foward.
					</div>
					<a href="#" id="ICalculatorDescriptionToggle">Hide this description.</a>
					<div id="ICalculatorMechanism">
						<div id="ICalculatorConfigurations">
						  <table width="100%">
						<tr>
							<td>
								Petrol Price:<div id="IDivPetrolPrice">0.000</div>
                            </td>
                            <td>
								Petrol Spent over 100KMs:<div id="IDivPetrolOverHundredKM">0.0</div>
                            </td>
                            <td>
								Trip Distance:<div id="IDivTripDistance">0</div>
                            </td>
                        </tr>
                    </table>
							<br/>
							<div id="IDivSetPetrolPrice">
							<table width="753" border="0">
								<tr>
									<td width="549">Set Petrol Price </td>
									<td width="83">&nbsp;</td>
									<td width="107">&nbsp;</td>
								</tr>
								<tr>
									<td>Use this area to set how much the petrol costs. </td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>Price:
										<label id="ILabelPriceSetting">
											<input id="IFieldPriceSetting" type="input" >
										</label>
									</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td><a href="#" class="CReset">Reset</a></td>
									<td>&nbsp;</td>
									<td><a href="#" class="CForward">Forward</a></td>
								</tr>
							</table>
						</div>
							<div id="IDivSetPetrolSpent">
							  <table width="754" border="0">
									<tr>
										<td width="549">Set Petrol Spent over 100KMs </td>
										<td width="83">&nbsp;</td>
										<td width="108">&nbsp;</td>
									</tr>
									<tr>
										<td>Use this area to set how much petrol your vehicle spends over 100KMs. </td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
									</tr>
									<tr>
										<td>Spends:
											<label id="ILabelPetrolSpentSetting">
												<input id="IFieldPetrolSpentSetting" type="text" >
											</label>
										</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
									</tr>
									<tr>
										<td><a href="#" class="CReset">Reset</a></td>
										<td><a href="#" class="CBack">Back</a></td>
										<td><a href="#" class="CForward">Forward</a></td>
									</tr>
							  </table>
							</div>
							<div id="IDivSetTripDistance">
							  <table width="754" border="0">
									<tr>
										<td width="548">Set Trip Distance </td>
										<td width="84">&nbsp;</td>
										<td width="108">&nbsp;</td>
									</tr>
									<tr>
										<td>Use this area to set the distance of the trip. </td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
									</tr>
									<tr>
										<td>Distance:
											<label id="ILabelTripDistanceSetting">
												<input id="IFieldTripDistanceSetting" type="text" >
											</label>
										</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
									</tr>
									<tr>
										<td><a href="#" class="CReset">Reset</a></td>
										<td><a href="#" class="CBack">Back</a></td>
										<td><a href="#" class="CForward">Forward</a></td>
									</tr>
							  </table>
							</div>
							<div id="IDivShowResults">
							<table width="754" border="0">
								<tr>
									<td width="548">Results </td>
									<td width="85">&nbsp;</td>
									<td width="107">&nbsp;</td>
								</tr>
								<tr>
									<td>This is where the results of your calculation are shown. </td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>
										Liters spent on trip:<label id="ILabelLitersSpent">0.0</label>
										<br/>
										Cost of trip:<label id="ILabelCost">0.0</label>
									</td>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td><a href="#" class="CReset">Reset</a></td>
									<td><a href="#" class="CBack">Back</a></td>
									<td>&nbsp;</td>
								</tr>
							</table>
                        </div>
						</div>
					</div>
                    <br/>
					<table width="857" border="0" id="ITableCommandListCalculator" >
                        <tr>
                            <td width="61" height="22"> Back -&gt; </td>
                            <td width="49"> Left -&gt;</td>
                            <td width="23"><p>h -&gt;</p></td>
                            <td width="706">b</td>
                        </tr>
                        <tr>
                            <td>Forward -&gt;</td>
                            <td>Right -&gt;</td>
                            <td>l -&gt;</td>
                            <td>f</td>
                        </tr>
                        <tr>
                            <td>Reset -&gt;</td>
                            <td>Down -&gt;</td>
                            <td>j -&gt;</td>
                            <td>r</td>
                        </tr>
                        <tr>
                            <td>Menus -&gt;</td>
                            <td>Up -&gt;</td>
                            <td>k -&gt;</td>
                            <td>Inside textbox press Esc</td>
                        </tr>
                    </table>
				</div>
			</div>
			<div class="CFooter">
				&nbsp;
			</div> 
		</div>
	</body>
</html>
